<template>
  <div class="block">
    <el-container>
      <div class="el-main">
        <div class="container-top">
          <div class="analysis-box">
            <div class="analysis-title">班产量查询</div>
            <div class="analysis-query">
              <el-select v-model="queryData.stationName" placeholder="请选择车站" style="width: 140px" class="filter-item">
                <el-option v-for="(item, index) in stationNameOptions" :key="index" :label="item" :value="item" />
              </el-select>
              <el-input v-model.trim="queryData.dj" placeholder="请输入调车机号" style="width: 140px" class="filter-item" />
              <el-date-picker v-model="value1" :clearable="false" type="daterange" style="width: 250px" placeholder="选择开始时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="startChange" placement="bottom-start"></el-date-picker>
              <!-- <el-date-picker :clearable="false"  v-model="queryData.endTime" type="date" style="width: 140px" placeholder="选择结束时间" :picker-options="pickerOptions" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="endChange" placement="bottom-start"></el-date-picker> -->
              <el-button class="reset" type="success" @click="reset">重置</el-button>
              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查询</el-button>
            </div>

            <div>
              <el-table :key="tableKey" v-loading="listLoading" :data="rcvTableData" border fit height="350">
                <el-table-column label="序号" prop="id" align="center" width="80">
                  <template slot-scope="scope">
                    <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="站名" width="150px" align="center">
                  <template slot-scope="{ row }">
                    <span>{{ row.stationName }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="机车号" width="150px" align="center">
                  <template slot-scope="{ row }">
                    <span>{{ row.locomotiveNo }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="编制人" width="100px" align="center">
                  <template slot-scope="{ row }">
                    <span>{{ row.weaverName }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="调车长" align="center">
                  <template slot-scope="{ row }">
                    <span>{{ row.shuntingLeader }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="生产时间" align="center">
                  <template slot-scope="{ row }">
                    <span>{{ row.productionTime }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="非生产时间" prop="nonProductionTime" align="center"> </el-table-column>
                <el-table-column label="班次开始时间" align="center" prop="shiftStartTime"> </el-table-column>
                <el-table-column label="班次结束时间" align="center" prop="shiftEndTime"> </el-table-column>
                <el-table-column label="作业单的次数" align="center" prop="workItemCount"> </el-table-column>
              </el-table>
            </div>

            <el-pagination background layout="total, sizes, prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize" :page-sizes="[10, 50, 100, 200, 500]" :total="total" :current-page="currentPage" align="center"></el-pagination>
          </div>
        </div>

        <div class="container-top">
          <div class="analysis-box ">
            <div class="analysis-title">班产量汇总</div>
            <div class="analysis-box-echarts">
              <Echarts :options="analysisOption" :auto-resize="true"></Echarts>
            </div>
          </div>
        </div>
      </div>
    </el-container>
  </div>
</template>

<script>
// require('../components/echartsThreme')
import { getStationNames } from '@/api/dataQuery'
import { getShiftOutput, getShiftOutputSummary } from '@/api/statistics'
import dayjs from 'dayjs'
import Echarts from 'vue-echarts'
import * as echarts from 'echarts'
import './index.scss'
export default {
  data() {
    return {
      queryData: {
        stationName: '',
        dj: '', // 调车机
        startTime: dayjs().format('YYYY-MM-DD 00:00:00'),
        endTime: dayjs().format('YYYY-MM-DD 23:59:59')
      },
      value1: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
      stationnameList: [],
      listLoading: false,
      tableKey: 0,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      stationNameOptions: [],
      trainTypeOptions: ['流动调车', '上线运行'],
      rcvTableData: [],
      analysisOption: {}
    }
  },
  components: {
    Echarts
  },
  created() {
    this.getAllStationNames()
  },
  mounted() {},
  computed: {
    pickerOptions() {
      let _this = this
      return {
        disabledDate(time) {
          if (_this.queryData.startTime) {
            return time.getTime() < new Date(_this.queryData.startTime).getTime()
          } else {
            return false
          }
        }
      }
    }
  },
  watch: {},
  methods: {
    getTableData(newObj) {
      let obj = {
        page: this.currentPage,
        size: this.pageSize,
        obj: newObj
      }
      getShiftOutput(obj).then(res => {
        if (res.code == 0) {
          this.rcvTableData = res.data.records
          this.total = res.data.total
        } else {
          this.rcvTableData = []
          this.total = 0
          this.$message(res.msg)
        }
      })
    },
    getEchartsData(newObj) {
      let obj = {
        obj: newObj
      }
      getShiftOutputSummary(obj).then(res => {
        if (res.code == 0) {
          let color = ['#52BCA9', '#E46666', '#3BA272', '#FC8452', '#9A60B4', '#73C0DE', '#91CC75', '#5470C6']
          let newArr = res.data
          let noworktimevalue = 0
          newArr.forEach(element => {
            noworktimevalue += Number(element.nonProductionTime)
          })
          let worktimevalue = 0
          newArr.forEach(element => {
            worktimevalue += Number(element.productionTime)
          })
          let noworktime = {
            name: '非生产时间',
            value: noworktimevalue
          }
          let worktime = {
            name: '生产时间',
            value: worktimevalue
          }

          let datas = [noworktime, worktime]
          let newoption = {
            //你的代码
            color: color,
            tooltip: {
              trigger: 'item',
              extraCssText: 'width: 128px;  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);',
              formatter: function(params) {
                let str =
                  (params.data &&
                    `<div style="font-weight: bold;">${params.name}</div>
            <div style="display:flex; justify-content: space-between; align-items: center;">
                <span><span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: ${color[params.dataIndex]}; margin-right: 4px;">
                <span>${params.value}分钟</span>
            </div>`) ||
                  ''
                return str
              }
            },
            series: [
              {
                name: '',
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%'],
                label: {
                  normal: {
                    formatter: '{xx|{b} }{yy|{d} %}',
                    rich: {
                      xx: {
                        fontSize: 12,
                        lineHeight: 32,
                        color: '#fff'
                      },
                      yy: {
                        fontSize: 16,
                        fontWeight: 600,
                        lineHeight: 32,
                        color: '#fff'
                      }
                    }
                  }
                },
                data: datas,
                itemStyle: {
                  emphasis: {
                    // 鼠标经过扇形区域时的阴影效果
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                },
                labelLine: {
                  normal: {
                    length: 5,
                    length2: 20,
                    smooth: true
                  }
                }
              }
            ]
          }
          this.analysisOption = newoption
        } else {
          this.analysisOption = {}
          this.$message(res.msg)
        }
      })
    },
    startChange(val) {
      // this.queryData.startTime = val + ' 00:00:00'
      this.queryData.startTime = val[0] + ' 00:00:00'
      this.queryData.endTime = val[1] + ' 23:59:59'
    },
    endChange(val) {
      this.queryData.endTime = val + ' 23:59:59'
    },
    getAllStationNames() {
      getStationNames().then(res => {
        if (res.code === 0) {
          this.stationNameOptions = res.data
          this.queryData.stationName = res.data[0]
          let newObj = this.queryData
          this.getTableData(newObj)
          this.getEchartsData(newObj)
        } else {
          this.listLoading = true
          this.$message('暂无数据')
        }
      })
    },
    reset() {
      this.queryData.startTime = dayjs().format('YYYY-MM-DD 00:00:00')
      this.queryData.endTime = dayjs().format('YYYY-MM-DD 23:59:59')
      ;(this.value1 = [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD 23:59:59')]), (this.queryData.dj = '')
      this.currentPage = 1
      this.pageSize = 10
      this.getTableData(this.queryData)
      this.getEchartsData(this.queryData)
    },
    search() {
      let newObj = this.queryData
      this.getTableData(newObj)
      this.getEchartsData(newObj)
      // this.getAllClassOutputInfo()
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      // this.getAllClassOutputInfo()
      this.getTableData(this.queryData)
    },
    handleSizeChange: function(size) {
      this.pageSize = size
      // this.getAllClassOutputInfo()
      this.getTableData(this.queryData)
    }
  }
}
</script>
